<template>
  <div id="Shoppingcary">
    <!-- 商品列表区 -->
    <div class="carlist">
      <div class="mui-card">
        <div class="mui-card-content" v-for="(item,i) in carlist" :key="i">
          <div class="mui-card-content-inner">          
          <mt-switch v-model="$store.getters.getbutton[item.id]" @change="selectChange(item.id,$store.getters.getbutton[item.id])"></mt-switch>
          <img :src="item.thumb_path" alt="">
         <div class="info" >
           <h1>{{item.title}}</h1>
           <p>
             <span style="color:red;fout-width:bold;">&yen;{{item.sell_price}}</span>&nbsp;&nbsp;
              <!-- 组件 -->
            <number :num="$store.getters.getCarcont[item.id]" :ids="item.id"></number>&nbsp;&nbsp;
             <span class="delete" style="color:blue;" @click="remove(item.id,i)">删除</span>
           </p>
         </div>
         
          </div>
        </div>
      </div>
    </div>
    <!-- 商品结算区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner jiesun">
          <div class="left">
            <p>总计(不含运费)</p>
            <p>已勾选商品<span>{{$store.getters.getCarCountMoney.count}}</span>件，总价：<span>&yen;{{$store.getters.getCarCountMoney.money}}</span></p>
          </div>
          <mt-button type="danger">去结算</mt-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import number from './subcomponents/Carnumber'
export default {
  data() {
    return {
      carlist:[]   //购物车里保存的数据
    };
  },
  methods: {
    getcar(){
      var ids=[]
      this.$store.state.car.forEach(item=>{
        ids.push(item.id)
      })
      if(ids.length<=0){
        return
      }
      this.$axios.get('/api/goods/getshopcarlist/'+ids.join(',')).then(result=>{
        if(result.status===200){
          this.carlist=result.data.message
         console.log(this.carlist)
        }
        console.log(result)        
      })
    },
    remove(id,index){  //从数组里面删除
    this.carlist.splice(index,1)
    this.$store.commit('deleteFromcar',id)
    },
    selectChange(id,val){    //按钮开关改变会触发此事件
    // console.log(id,val)
    this.$store.commit('changeSelect',{id,selected:val})  
    }
  },
  created () {
    this.getcar()
  },
  components: {
    number
  }
};
</script>

<style scoped lang="scss">
#Shoppingcary{
    background-color: pink;
    overflow: hidden;
    .mui-card-content-inner{
      display: flex;
      align-items: center;
      justify-content: space-between;
      img{
        width: 60px;
        height: 60px;
      }
      h1{
        font-size: 14px;
      }
      .info{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
    .jiesun{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left{
        p{
          span{
            color: red;
            font-size: 17px;
            font-weight: bold;
          }
        }
      }
    }
}
</style>
